<template>
  <div class="privateDetails">
    <Popup :popupVisible=true :back="back" :source="this.$store.state.roomsource">
      <div class="d1">
        <span class="s1">五角场通勤时间短,独厨独卫一室户</span>
        <div class="d2" @click="linkUserCenter">
          <img class="img1" src="../assets/img/2.jpg" alt="" />
          <div class="m1">
            <div class="d3">杨豆豆</div>
            <div class="d4">5次浏览</div>
            <span class="s2">03-24 13:44发布</span>
          </div>
        </div>
        <div class="m2">
          <!-- <span class="s3">房屋位置(点击查看地图位置)</span> -->
          <div class="m3">浦东新区思学路</div>
        </div>
        <div class="m4">
          <p class="p1">租金</p>
          <p class="p2">2200元/月</p>
          <div class="d5">
            <img
              class="img2"
              src="../assets/img/roomshow/roomshow1.jpg"
              alt=""
            />
            <img
              class="img2"
              src="../assets/img/roomshow/roomshow3.jpg"
              alt=""
            />
            <img
              class="img2"
              src="../assets/img/roomshow/roomshow2.jpg"
              alt=""
            />
            <img
              class="img2"
              src="../assets/img/roomshow/roomshow1.jpg"
              alt=""
            />
            <img
              class="img2"
              src="../assets/img/roomshow/roomshow3.jpg"
              alt=""
            />
            <img
              class="img2"
              src="../assets/img/roomshow/roomshow2.jpg"
              alt=""
            />
          </div>
          <div class="h1">
            <span class="s4">
              【直租】8号线沈杜公路浦江延线汇溱站,精装修,一居室,独厨独卫,天然煤气做饭家电具齐全,步行地铁站就3分钟,真实房源.价格1700元,小区旁边就是万达广场,郊野公园.房东出租,无直接费,另包入住,13052336642
            </span>
            <p class="s5">温馨提示:交换联系方式请使用私密回复，避免骚扰</p>
          </div>
        </div>
      </div>
      <Comment></Comment>
    </Popup>
  </div>
</template>
<script>
import Comment from "./Comment.vue";
import Popup from "./Popup.vue";
export default {
  components: {
    Popup,
    Comment,
  },
  data() {
    return {
      back: "community",
    };
  },
  methods: {
    linkUserCenter() {
      this.$router.push({
        name: "usercenter",
        params: { parent: "privateDetails" },
      });
    },
  },
};
</script>

<style>
.privateDetails .d1 {
  padding: 13px;
  margin-top: 50px;
  height: 29rem;
  margin-bottom: 150px;
}
.privateDetails .d1 .s1 {
  font-size: 20px;
}
.privateDetails .d1 .d2 {
  position: relative;
  top: 20px;
}
.privateDetails .d1 .d2 .img1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
}
.privateDetails .d1 .d2 .m1 {
  position: relative;
  left: 65px;
  top: 5px;
}
.privateDetails .d1 .d2 .m1 .d4 {
  position: relative;
  left: 225px;
  top: 15px;
}
.privateDetails .d1 .d2 .m1 .d3 {
  width: 72px;
  background: url("../assets/imgs/性别女.png") right no-repeat;
}
.privateDetails .d1 .d2 .m1 .d3,
.s2 {
  position: absolute;
}
.privateDetails .d1 .m2 {
 position: relative;
    top: 65px;

    box-shadow: 1px 1px 11px -3px;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-top: 0.5rem;
    border-radius: 10px;
    background-image: url(../assets/img/map/mapshow1.png);
    color: #007d65;

}
.privateDetails .d1 .m2 .s3 {
  font-size: 16px;

}
.privateDetails .d1 .m2 .m3 {
  font-size: 20px;
  margin-top: 7px;
  background: url("../assets/imgs/定位2.png") right no-repeat;
}
.privateDetails .d1 .m4 {
  margin-top: 85px;
}
.privateDetails .d1 .m4 .p1 {
  font-size: 17px;
  margin-bottom: 6px;
}
.privateDetails .d1 .m4 .p2 {
  font-size: 20px;
  margin-bottom: 7px;
}
.privateDetails .d1 .m4 .d5 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.privateDetails .d1 .m4 .d5 img {
  width: 100px;
  height: 90px;
  margin-top: 10px;
  border-radius: 5px;
}
.privateDetails .d1 .m4 .h1 {
  height: 165px;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.privateDetails .d1 .m4 .h1 .s4 {
  font-size: 15px;
  position: absolute;
  top: 20px;
}
.privateDetails .d1 .m4 .h1 .s5 {
  position: absolute;
  font-size: 14px;
  top: 120px;
  left: 20px;
  color: rgb(77, 191, 226);
}
</style>